<template>
    <h1>当前求和为：{{sum}}</h1>
    <button @click="sum++">点我加1</button>
</template>

<script>
  import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
  export default {
    name: 'Demo',
    setup(){
      let sum = ref(0)

      //通过组合式API的形式去使用声明周期钩子
      onBeforeMount(() => {
        console.log('---onBeforeMount---')
      })
      onMounted(() => {
        console.log('---onMounted---')
      })
      onBeforeUpdate(() => {
        console.log('---onBeforeUpdate---')
      })
      onUpdated(() => {
        console.log('---onUpdated---')
      })
      onBeforeUnmount(() => {
        console.log('---onBeforeUnmount---')
      })
      onUnmounted(() => {
        console.log('---onUnmounted---')
      })
      
      //返回一个对象（常用）
      return {
        sum,
      }

    },
  }
</script>

